<script>
    export default {
        name: 'Music',
        data() {
            return {
                musicList: [], // 编辑推荐的列表数据
                newsong: [], // 最新音乐的列表数据
                authors: '', // 作者名称
            }
        },
        // 进入页面就获取网络请求，生命周期函数
        created() {
            this.getMusic();
            this.getNewSong();
        },
        methods: {
            // 获取推荐音乐的数据
            async getMusic() {
                let res = await this.$api.getMusic();
                console.log('推荐音乐', res.data.result);
                this.musicList = res.data.result;
            },
            // 获取最新音乐
            async getNewSong() {
                let res = await this.$api.getNewSong();
                console.log('最新音乐', res.data.result);
                this.newsong = res.data.result;

                // 作者名称

            },
            // 处理播放量的数据
            num(n) {
                return (n / 10000).toFixed(1);
            }
        },
        // 过滤器 -- 常见文本格式化
        filters: {
            num(val) {
                if (!val) {
                    return;
                }
                // val播放量的数值
                return val > 9999 ? (val / 10000).toFixed(1) + "万" : val;
            },
            sliceLine(val) {
                if (!val) {
                    return;
                }
                return val.style(0, -1);
            }
        }

    }
</script>

<template>
    <div>
        <!--编辑推荐-->
        <div class="wrap">
            <div class="title">编辑推荐</div>
            <div class="content">
                <van-row gutter="4">
                    <van-col span="8" v-for="item in musicList" :key="item.id">
                        <div class="item">
                            <router-link :to="'/playlist/'+item.id">
                                <img :src="item.picUrl" alt="">
                                <div class="total">{{ item.playCount | num }}</div>
                                <div class="info">{{ item.name }}</div>
                            </router-link>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
        <!--最新音乐-->
        <div>
            <div class="title">最新音乐</div>
            <div class="list">
                <div v-for="item in newsong" :key="item.id">
                    <!--<router-link :to="'/songpage/'+item.id+'/'+item.name" class="list-item">-->
					<router-link :to="{name: 'Songpage', params: {id: item.id, name: item.name}}" class="list-item">
                        <div class="left">
                            <div class="subtitle">{{ item.name }} <span>{{ item.song.alias[0] }}</span></div>
                            <div class="author">
                            <span v-for="ele in item.song.artists" :key="ele.id" class="ele">
                                {{ ele.name }}
                            </span>
                                - {{ item.song.album.name }}
                            </div>
                        </div>
                        <div class="right">
                            <img src="@/assets/images/play.png">
                        </div>
                    </router-link>
                </div>
                <div class="list-item">
                    <div class="left">
                        <div class="subtitle">歌曲名称<span>xxx</span></div>
                        <div class="author">作者</div>
                    </div>
                    <div class="right">
                        aa
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .title {
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        font-size: 0.34rem;
        position: relative;
        padding-left: 0.2rem;

        &::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 20px;
            background-color: #ff5555;
            top: 2px;
            left: 0;
        }
    }

    .content {
        .item {
            position: relative;

            img {
                width: 100%;
            }

            .total {
                color: #ffffff;
                position: absolute;
                right: 2px;
                top: 2px;
            }

            .info {
                margin: 0.12rem;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }

        .van-col {
            height: 3.56rem !important;
        }
    }

    //最新音乐的样式
    .list-item {
        border-bottom: 1px solid #eeeeee;
        padding-left: 10px;
        padding-top: 6px;
        padding-bottom: 6px;
        display: flex;

        .left {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
        }

        .right {
            width: 0.9rem;

            img {
                width: 20px;
                margin-top: 10px;
            }
        }

        .subtitle {
            font-size: 17px;
            overflow: hidden;
            color: #333333;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;

            span {
                //font-size: 12px;
                color: #888888;
            }
        }

        .author {
            margin-top: 4px;
            font-size: 12px;
            color: #888888;

            .ele {
                &::after {
                    content: '/';
                }
            }

            .ele:last-child {
                &::after {
                    content: '';
                }
            }
        }
    }
</style>